/**
* 功能描述：步骤条样式表
* @author jin xiaohang
* @date 2022/9/29 16:58
* @version 1.0
*/


@import "src/style/mixins/index";

//定义样式
@include b(steps){
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #000000d9;
  list-style: none;
  display: flex;
  width: 100%;
  font-size: 0;

  .#{$namespace}-steps-item{
    position: relative;
    display: inline-block;
    flex: 1;
    overflow: hidden;
    vertical-align: top;
    margin-right: 12px;

    //步骤条容器
    .#{$namespace}-steps-container{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;

      //步骤条图标
      .#{$namespace}-steps-item-icon{
        width: 24px;
        height: 24px;
        margin: 0 8px 0 0;
        font-size: 12px;
        line-height: 24px;
        text-align: center;
        border-radius: 24px;
        background-color: #fff;
        border: 1px solid #1890ff;
        transition: background-color .3s,border-color .3s;

        //图标单元格
        .#{$namespace}-steps-item-icon-cell{
          position: relative;
          top: -0.5px;
          line-height: 1;
          color: #1890ff;
        }
      }

      //步骤条内容
      .#{$namespace}-steps-item-content{
        display: inline-block;
        vertical-align: top;

        //步骤条题目
        .#{$namespace}-steps-item-title{
          padding-right: 12px;
          font-size: 14px;
          line-height: 24px;
          position: relative;
          display: inline-block;

          &::after{
            position: absolute;
            top: 12px;
            left: 100%;
            display: block;
            width: 9999px;
            height: 1px;
            content: "";
            background-color:#1890ff;
          }
        }
      }
    }
  }
}